<!-- https://blog.csdn.net/qq_52013792/article/details/126139478 -->
<template>
  <div id="threeBox" ref="threeBox" class="threeBox"></div>
</template>
<script lang='ts' setup>
import { ref, onMounted } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
// 创建容器
const threeBox = ref<any>(null);
onMounted(() => {
  // 初始化场景
  const scene = ref(new THREE.Scene());

  // 初始化相机
  const width = window.innerWidth,
    height = window.innerHeight;
  const camera = ref(new THREE.PerspectiveCamera(50, width / height, 1, 10000));
  //相机辅助对象
  const helper = ref(new THREE.CameraHelper(camera.value));
  // 相机位置
  camera.value.position.set(0, 400, 500);
  //相机观看位置
  camera.value.lookAt(0, 0, 0);
  const geometry = ref(new THREE.BoxGeometry(100, 100, 100));
  //创建材质（外观）
  const material = ref(new THREE.MeshLambertMaterial());
  //创建一个网格模型对象,将上面设置好的物体及其材质注入到模型对象中
  const mesh = ref(new THREE.Mesh(geometry.value, material.value));
  // 添加到舞台
  scene.value.add(mesh.value);
  // 创建一个渲染器
  const renderer = ref(
    new THREE.WebGLRenderer({
      antialias: true,
      alpha: true,
      logarithmicDepthBuffer: true,
    })
  );
  renderer.value.setSize(
    threeBox.value.clientWidth,
    threeBox.value.clientHeight
  );

  // renderer.value.render(scene.value, camera.value);
  threeBox.value.appendChild(renderer.value.domElement);
});

//
</script>
<style lang='less'>
.threeBox {
  width: 500px;
  height: 500px;
  border: 1px solid red;
}
</style>